<template>
  <!-- <el-card>
    <template #header>
      <span  class="card-header" style="display:inline-block">节目集信息</span>
      <a href="javascript:;" @click="handleEditMediaInfo" style="display:inline-block" v-if="currentCorpid === mediaInfo.corpid">
        <el-tag size="mini">
          <el-icon>
            <edit />
          </el-icon>
          编辑
        </el-tag>
      </a>
    </template> -->
    <el-row>
      <el-col :span="24">
        <div class="media-header">
          <div>
            <span  class="card-header" style="display:inline-block;">节目集信息</span>
            <a href="javascript:;" @click="handleEditMediaInfo" style="display:inline-block" v-if="currentCorpid === mediaInfo.corpid">
              <el-tag size="mini">
                <el-icon>
                  <edit />
                </el-icon>
                编辑
              </el-tag>
            </a>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <ul class="mediainfo">
          <li>
            <span>媒资名称：</span>
            <span>{{mediaInfo['name']}}</span>
          </li>
          <li>
            <span>英文名称：</span>
            <span>{{mediaInfo['enname']}}</span>
          </li>
          <li>
            <span>别名：</span>
            <span>{{mediaInfo['alias']}}</span>
          </li>
          <li>
            <span>媒资类型：</span>
            <span>{{mediaTypes[mediaInfo['mediatype']]}}</span>
          </li>
          <li>
            <span>一级分类：</span>
            <span>{{mediaInfo['catname']}}</span>
          </li>
          <li>
            <span>二级分类：</span>
            <span>
            <span v-for="(subcat, index) in mediaInfo['subcatnames']" :key="subcat+index">{{subcat}}</span>
            </span>
          </li>
          <li>
            <span>标签：</span>
            <span><span v-for="(tag, index) in mediaInfo['tag']" :key="tag + index" class="tags">{{tag}}、</span></span>
          </li>
          <li>
            <span>审核状态：</span>
            <span>
              <span v-if="mediaInfo['state'] == 0">待审核</span>
              <span v-else-if="mediaInfo['state'] == 1">审核成功</span>
              <span v-else-if="mediaInfo['state'] == 2">审核失败</span>
            </span>
          </li>
          <li>
            <span>付费类型：</span>
            <span v-if="mediaInfo.paytype == 1" style="color: #F56C6C">付费</span>
            <span v-else style="color: #67C23A">免费</span>
          </li>
          <li></li>
        </ul>
        <long-common
                :mediaExtends="mediaInfo.extends"
                :programTypeList="programTypeList"
                v-if="mediaInfo.tplid == '5f80217524ac4'"
        />
        <short-common
                :mediaExtends="mediaInfo.extends"
                v-if="mediaInfo.tplid == '5f9143132386a'"
        />
        <event-live-common
                :mediaExtends="mediaInfo.extends"
                v-if="mediaInfo.tplid == '5f802141566a5'"
        />
        <white-board
                :mediaExtends="mediaInfo.extends"
                v-if="mediaInfo.tplid == '5f8023ab4f3b3'"
        />
        <article-common
                :mediaExtends="mediaInfo.extends"
                v-if="mediaInfo.tplid == '5f87f5b15a8c0'"
        />
        <shop-common
                :mediaExtends="mediaInfo.extends"
                v-if="mediaInfo.tplid == '5fbf54451e6a8'"
        />
        <ul class="mediainfo">
          <li>
            <span>简介：</span>
            <span class="txtclamp3">{{mediaInfo['abstract']}}</span>
          </li>
          <li v-if="mediaInfo['tplid'] != '5f87f5b15a8c0'">
            <span>详情：</span>
            <span class="txtclamp3">{{mediaInfo['content']}}</span>
          </li>
        </ul>
      </el-col>
    </el-row>
    <!-- 关联的图片介质列表开始 -->
    <image-medium
      v-if="mediaInfo.corpid"
      :currentCorpid="currentCorpid"
      relType="media"
      :data-info="mediaInfo"
      @reloadMediaData="reloadMediaData"
      @handleVideoPlay="handleVideoPlay"
    />
    <!-- 关联的图片介质列表结束 -->

    <!-- 文章详细信息展示开始 -->
    <article-detail
            :mediaInfo="mediaInfo"
            v-if="mediaInfo.tplid == '5f87f5b15a8c0'"
    />
    <!-- 文章详细信息展示结束-->

    <!-- 图集信息展示开始 -->
    <imageset-common
            :mediaExtends="mediaInfo.extends"
            v-if="mediaInfo.tplid == '5f87ffba1d6e6'"
    />
    <!-- 图集信息展示结束 -->
    <!-- 关联的视频介质开始 -->
    <video-medium
      v-if="mediaInfo && mediaInfo.tplid != '5f87ffba1d6e6' && mediaInfo.tplid != '5f87f5b15a8c0' && mediaInfo.hasseries==0"
      ref="videoMediumRef"
      :data-info="mediaInfo"
      :current-corpid="currentCorpid"
      rel-type="media"
      @handleVideoPlay="handleVideoPlay"
      @reloadImageList="reloadMediaData"
    />
    <!-- 关联的视频介质结束 -->
  <!-- </el-card> -->
</template>

<script>
  import {reactive, ref, nextTick} from 'vue'
  import {useStore} from 'vuex'
  import {useRouter, useRoute} from 'vue-router'
  import {Edit} from "@element-plus/icons"
  import {getMediaInfo} from "@/api/media/media";
  import mediaTypeMixin from "@/mixins/mediaTypeMixin"
  import LongCommon from "../DetailExtends/LongCommon";
  import ArticleCommon from "../DetailExtends/ArticleCommon";
  import ArticleDetail from "../DetailExtends/ArticleDetail";
  import EventLiveCommon from "../DetailExtends/EventLiveCommon";
  import ImagesetCommon from "../DetailExtends/ImagesetCommon";
  import ShopCommon from "../DetailExtends/ShopCommon";
  import WhiteBoard from "../DetailExtends/WhiteBoard";
  import ShortCommon from "../DetailExtends/ShortCommon";
  import ImageMedium from "./ImageMedium";
  import VideoMedium from "./VideoMedium";

  export default {
    name: "MediaInfo",
    components: {Edit, LongCommon, ArticleDetail, ArticleCommon, EventLiveCommon, ImagesetCommon, ShopCommon, WhiteBoard, ShortCommon, ImageMedium, VideoMedium},
    props: {
      query: {
        type: Object,
        required: true
      }
    },
    emits: ['handleVideoPlay'],
    setup(props, context) {
      const store = useStore()
      const router = useRouter()
      const route = useRoute()
      const currentCorpid = store.getters.corpinfo.corpid
      const mediaInfo = reactive({})
      const {mediaTypes} = mediaTypeMixin()
      const programTypeList = reactive({
        feature: '正片',
        trailer: '预告片',
        titbits: '花絮'
      })
      const videoMediumRef = ref(null)

      const getMediaInfoData = () => {
        getMediaInfo({mediaid: props.query.mediaid}).then(response => {
          if (response.errcode == 0) {
            Object.assign(mediaInfo, response.data)
            nextTick(() => {
              if (videoMediumRef.value) {
                videoMediumRef.value.getVideoDataList()
              }
            })
          }
        })
      }

      const handleEditMediaInfo = () => {
        const localQuery = {mediaid:props.query.mediaid, groupid: props.query.groupid, mediatype: props.query.mediatype}
        switch (route.name) {
          case 'mediaalldetail':
            router.push({path: '/medias/list/all/editmedia', query: localQuery})
            break
          case 'mediaimagesetdetail':
            router.push({path: '/medias/list/imageset/editmedia', query: localQuery})
            break
          case 'mediaarticledetail':
            router.push({path: '/medias/list/article/editmedia', query: localQuery})
            break
          case 'mediashortvideodetail':
            router.push({path: '/medias/list/shortvideo/editmedia', query: localQuery})
            break
          case 'mediaslongvideodetail':
            router.push({path: '/medias/list/longvideo/editmedia', query: localQuery})
            break
          default:
            router.push({path: '/editmedia', query: localQuery})
            break
        }
      }

      const reloadMediaData = () => {
        getMediaInfoData()
      }
      const handleVideoPlay = (row) => {
        context.emit('handleVideoPlay', row)
      }

      const init = () => {
        getMediaInfoData()
      }
      init()
      return {
        currentCorpid,
        handleEditMediaInfo,
        mediaInfo,
        mediaTypes,
        reloadMediaData,
        handleVideoPlay,
        programTypeList,
        videoMediumRef
      }
    }
  }
</script>

<style lang="scss">
  .card-header{
    font-size: 18px;
   // display: inline-block !important;
    font-weight: bold;
    margin-right: 10px;
  }
  .mediainfo{
    display: flex;
    flex-wrap: wrap;
    li {
      display:flex;
      margin-bottom: 10px;
      width: 50%;
      font-size: 12px;
      span{
        display: inline-block;
        color:#333;
      }
      >span:first-child{
        width:85px;
        color:#999;
      }
      >span:last-child{
        width:80%;
      }
    }
  }
</style>
